<template>
  <div id="app">
    <!-- 父子组件传值 
    // 子组件接收父组件传参
    // @Prop接受一个参数可以是类型变量或者对象或者数组.@Prop接受的类型比如Number是JavaScript的类型,之后定义的属性类型则是TypeScript的类型
    // 高阶函数接受参数，兼容以下写法
    // @Prop(String) name!: string | undefined;
    // @Prop([String, Number]) count!: string | number;
    // @Prop({type: Number, default: 0, (required、validator)}) age!: number;
    // @Prop() private name!: string;
    -->
    <HelloWorld @editHandleEmit="editHandle" msg="父组件传递的数据"/>
  </div>
</template>

<script lang="ts">
// lang=“ts”：script声明当前语言是ts
import { Component, Vue, Watch } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
// @Component：注明此类为一个vue组件
// @Component({})可以声明components、filter、directives等未提供装饰器的vue选项
// 也可以声明computed、watch、路由守卫函数(beforeRouteEnter、beforeRouteLeave)等
@Component({
  components: {
    HelloWorld,
  },
})
// App 是组件名称
export default class App extends Vue { //export当前组件类是继承vue的
  // 定义的变量 data属性初始化可以被声明为类的属性。
  message: string = "Hello World!";

  // 方法  组件方法可以直接声明为类的原型方法：
  hello() {
    console.log("Hello World!");
  }

  // 计算属性可以声明为类属性getter/setter：
  // 对于Vue中的计算属性,我们只需要将该计算属性名定义为一个函数,并在函数前加上get关键字即可
  // 定义的变量
  firstName: string = "John";
  lastName: string = "Doe";
  // 计算属性
  get name() {
    return this.firstName + " " + this.lastName;
  }
  // 计算属性
  set name(value) {
    const splitted = value.split(" ");
    this.firstName = splitted[0];
    this.lastName = splitted[1] || "";
  }


  // @Watch使用非常简单,接受第一个参数为要监听的属性名 第二个属性为可选对象
  // {immediate?: boolean, deep?: boolean}第一个表示监听开始后是否立即调用回调函数，第二个表示监听的属性变化时是否调用回调函数
  // 侦听器
  @Watch("message", { immediate: true, deep: true })
  onChangeValue(newVal: string, oldVal: string) {}

  // @Emit会将回调函数的返回值作为第二个参数，如果返回值为一个Promise对象，emit会在Promise-resolved后触发
  // @Emit(‘del’) private delEmit(e: MouseEvent){}
  // @Emit()//省略参数将使用回调函数名，转化为中划线@add-data
  // addData(data: any){return ‘’;} //如果此处不return，则使用函数参数data
  editHandle(row: any) {
    console.log(row);
  }


  

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
